<template>
  <el-drawer
    append-to-body
    v-model="modalVisible"
    direction="rtl"
    :with-header="false"
    size="800"
  >
    <template #default>
      <div class="diy-editor-link-modal">
        <el-tabs v-model="tabActive" @tab-change="tatCanghe">
          <template v-for="(item, index) in linkTypes" :key="index">
            <el-tab-pane :label="item.title" :name="item.key"></el-tab-pane>
          </template>
        </el-tabs>
        <template v-if="tabActive == 'default'">
          <storeDiyLinkModalDefault
            :linkItem="linkItem"
            @change="selectedCanghe"
          ></storeDiyLinkModalDefault>
        </template>
        <template v-if="tabActive == 'diy'">
          <storeDiyLinkModalPage
            :linkItem="linkItem"
            @change="selectedCanghe"
          ></storeDiyLinkModalPage>
        </template>
        <template v-if="tabActive == 'goods'">
          <storeDiyLinkModalGoods
            :linkItem="linkItem"
            @change="selectedCanghe"
          ></storeDiyLinkModalGoods>
        </template>
      </div>
    </template>
    <template #footer>
      <div>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="selectOk">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
  <script lang="ts">
export default {
  name: "storeDiyLinkModal",
};
</script>
  <script setup lang="ts">
import { ref, getCurrentInstance, watch } from "vue";
import storeDiyLinkModalDefault from "./default.vue";
import storeDiyLinkModalPage from "./diy-page.vue";
import storeDiyLinkModalGoods from "./diy-goods.vue";
import { diyLinkType } from "@/types";

const props = withDefaults(
  defineProps<{
    title?: string;
    modelValue?: diyLinkType;
  }>(),
  {
    title: "选择链接",
    modelValue: () => {
      return {};
    },
  }
);
const modalVisible = ref<boolean>(false);

const emit = defineEmits(["update:modelValue", "change"]);

const tabActive = ref<string>("default");

const tatCanghe = (val: string) => {};

const linkTypes = ref<
  Array<{
    title: string;
    key: string;
  }>
>([
  {
    title: "商城链接",
    key: "default",
  },
  {
    title: "自定义页面",
    key: "diy",
  },
  {
    title: "商品",
    key: "goods",
  },
]);

const selectedData = ref<diyLinkType>(props.modelValue);

const selectedCanghe = (selectItem: object) => {
  selectedData.value = selectItem;
};

const selectOk = () => {
  linkItem.value = selectedData.value;
  emit("update:modelValue", selectedData.value);
  emit("change", selectedData.value);
  close();
};

const linkItem = ref<diyLinkType>();

const open = (link: diyLinkType) => {
  linkItem.value = link;
  tabActive.value = props.modelValue.type || tabActive.value
  modalVisible.value = true;
};

const close = () => {
  modalVisible.value = false;
};
defineExpose({ open });
</script>
  <style scoped>
.diy-editor-link-modal {
}
.diy-editor-link-main {
  display: flex;
  justify-content: flex-start;
}
.diy-editor-link-main-left {
  width: 120px;
  padding: 10px 0;
}
.diy-editor-link-type-item {
  border-radius: 5px;
  height: 45px;
  line-height: 45px;
  cursor: pointer;
  user-select: none;
}
</style>